
<template>
  <!-- 上传组件图片：名字用uploadImg -->
  <!-- 获取到上传图片的地址 加ref获取：this.$refs.imgref.fileList[0].url -->
  <div class="img-upload-box">

    <el-upload
      action="#"
      :http-request="uploadFn"
      :file-list="fileList"
      list-type="picture-card"
      :on-remove="removeFn"
      :on-change="onChange"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!--
        当图片开始上传 且 图片上传成前才需要显示
        percentage: 设置图片上传进度
        color: 设置不同阶段 进度条的颜色
     -->
    <el-progress
      v-if="fileList.length > 0 && percentage != 100 &&percentage != 0"
      :limit="1"
      type="dashboard"
      :percentage="percentage"
      :color="colors"
    />
  </div>
</template>
<script>
// 引入js-sdk
import COS from 'cos-js-sdk-v5'
// 实例化cos对象
var cos = new COS({
  SecretId: 'AKIDDLQN2RZS4QVKvJgz74qNhz2qOimbBWbQ',
  SecretKey: 'e8h04tX2IK6g4DCJDqEMGxOamtuhKlyx'
})
export default {
  data() {
    return {
      // url: ""
      fileList: [
        // { url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
      ],
      colors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ],
      percentage: 0 // 图片上传进度
    }
  },
  methods: {
    // 移除图片
    removeFn(file, fileList) {
      console.log(58, fileList)
      this.fileList = fileList
      // this.fileList = []
    },
    onChange(file, fileList) {
      console.log(fileList)
      this.fileList = fileList
    },
    uploadFn(params) {
      console.log(29, params)
      // this.fileList.push({
      //   url= 'http://' + data.Location
      // })
      cos.putObject(
        {
          Bucket: '79-hhhhr-1313460475', /* 必须 存储桶名字 */
          Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
          Key: params.file.name, /* 必须 上次后的图片名字  字符串类型 */
          StorageClass: 'STANDARD',
          Body: params.file, // 上传文件对象
          onProgress: (progressData) => {
            // 设置图片上传进度
            this.percentage = progressData.percent * 100
          }
        }, (err, data) => { // 上传结束，不一定成功，不一定失败
          console.log(42, err, data)
          if (!err) {
            console.log(this.fileList)
            this.fileList.forEach(image => {
              if (image.uid === params.file.uid) {
                image.url = 'http://' + data.Location
                image.status = 'success'
              }
            })
          } else {
            console.log('上传失败')
          }
        })
    },
    edit(val) { // 编辑时调用
      val.forEach(item => {
        // this.fileList = []
        this.fileList.push({ url: item })
      })
    }
  }
}
</script>

<style lang="scss">
.img-upload-box {
  display: inline-block;
  position: relative;

  .el-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.disable {
  .el-upload--picture-card {
    display: none;
  }
}
</style>
